<template>
  <!-- 数组测试文件 -->
  <div>
    <div>
      <input type="text" v-model="zhiinfo" name="" id="" />
      <span>防抖</span>
    </div>
    <div>
      <input type="text" @keyup="add" v-model="nameshowinfno" name="" id="" />
      <span>节流</span>
    </div>
    <div>
      {{ zhiinfo }}
    </div>

    <div>
      {{ zhiinfoaaa }}
    </div>
  </div>
</template>

<script>
import { thorttle } from '@/js/DigitGroup.js';
export default {
  data() {
    return {
      zhiinfo: '', // input输入框的值
      dinguzhi: null,
      nameshowinfno: '', // 节流输入框
      jianpan: null,
    };
  },
  computed: {
    // 针对于@input事件完成，这里是用计算属性做演示，根据值的变法来变化(防抖)
    zhiinfoaaa() {
      clearTimeout(this.dinguzhi);
      if (this.zhiinfo) {
        this.dinguzhi = setTimeout(function () {
          console.log(111111); // 请求接口
        }, 1000);
      }
    },
  },
  methods: {
    // 键盘事件事件(节流)
    add: thorttle(function () {
      console.log(this.nameshowinfno);
    }),
    // 数组降序
    addinfo() {
      let info = [];
      let c = '12345678';
      c = Object.assign({}, c);
      for (let i in c) {
        info.push(c[i]);
      }
      let ca = info.splice(0, 4);
      // 降序
      ca.sort(function (a, b) {
        return b - a;
      });
      console.log(ca);
      // 降序
      info.sort(function (a, b) {
        return b - a;
      });
      console.log(info);
    },

    // JSON数组排序
    addooooo() {
      let info = [{ name: 1 }, { name: 3 }, { name: 5 }, { name: 9 }, { name: 4 }, { name: 2 }, { name: 6 }, { name: 7 }, { name: 8 }];
      info.sort(function (a, b) {
        return a.name - b.name;
      });
      console.log(info);
    },

    // 多列排序对象数组多条件排序
    infoaddd() {
      let arr = [
        { sortNo: 2, sortNo2: 3 },
        { sortNo: 1, sortNo2: 3 },
        { sortNo: 5, sortNo2: 3 },
        { sortNo: 6, sortNo2: 3 },
        { sortNo: 7, sortNo2: 3 },
        { sortNo: 3, sortNo2: 4 },
        { sortNo: 3, sortNo2: 2 },
        { sortNo: 3, sortNo2: 1 },
        { sortNo: 3, sortNo2: 3 },
        { sortNo: 8, sortNo2: 3 },
        { sortNo: 4, sortNo2: 1 },
        { sortNo: 4, sortNo2: 2 },
      ];
      arr.sort(function (res, info) {
        if (res.sortNo == info.sortNo) {
          return info.sortNo2 - res.sortNo2;
        } else {
          return res.sortNo - info.sortNo;
        }
      });
      console.log(arr);
    },
  },
  created() {
    this.addinfo();
    this.addooooo();
    this.infoaddd();
  },
};
</script>

<style></style>
